<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj1 = {
            name: '东东',
            family: {
                age: 18,
                salary: '40K'
            }
        }

        /*==================================  什么是浅拷贝  ====================================*/
        // 浅拷贝 ： 在堆内存中新开辟一个内存空间，创建一个新对象
        //          ==> 拷贝源对象的第一层基本数据类型的值和引用类型的地址

        // 实现浅拷贝的方法：
        // 1. Object.assign()
        // 2. 扩展运算符
        // 3. 数组的concat
        // 4. 数组的slice
        /*==================================  end  ====================================*/

        // 第一层：最外面的一层 {}

        // 实现浅拷贝的方式
        // 1.Object.assign(目标对象，源对象)
        let obj2 = Object.assign({}, obj1)
        // 第一层，属性值如果是基本数据类型，拷贝前后的两个对象的这个属性相互不影响
        obj2.name = '练练'
        console.log(obj1.name) // 基本数据类型判断全等  值和类型
        console.log(obj2.name) // 引用类型，看地址是否一样

        // 第一层，属性值如果是引用类型，引用类型的值改变，会相互影响
        obj1.family.age = 20
        console.log(obj2)

        // 2. 扩展运算符 ...
        const obj3 = { ...obj1 }
        console.log(obj3)
        obj3.name = '欢欢'
        console.log(obj1.name)
        obj3.family.age = 30
        console.log(obj1.family.age)
        console.log(obj2.family.age)

        // 3. Array.prototype.concat()
        const arr1 = [1, 2, { name: '东东' }]
        const arr2 = arr1.concat()
        console.log(arr2)
        arr2[2].name = '欢欢'
        console.log(arr1)
        console.log(arr2)

        // 4. Array.prototype.slice()
        const arr3 = [1, 2, { name: '东东' }]
        const arr4 = arr3.slice()
        console.log(arr4)
        arr4[2].name = '欢欢'
        console.log(arr3)
    </script>
</body>

</html>